<template>
	<view class="">
		<view class="t-bl">
			<image class="blurbc" :src="topic.tImage" mode="aspectFit"></image>
		</view>
		<view class="topic-info">
			<view class="t-1 f">
				<image :src="topic.tImage" mode="scaleToFill"></image>
				<view class="f1">#{{topic.tName}}#</view>
			</view>
			<view class="t-2 f-ac">
				<view>动态 {{topic.tNews}}</view>
				<view>今日 {{topic.tToday}}</view>
			</view>
			<view class="t-3">
				{{topic.tInfo}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				/* topic:{
					tImage : "../../static/test/head.png",
					tName: "一梦三年",
					tInfo: "安静的绿卡就是的绿卡快乐圣诞节埃里克森安静的斯科拉技术大咖建设靠大家爱丽丝",
					tNews: 881,
					tToday: 588
				} */
			}
		},
		props:{
			topic: Object
		}
	}
</script>

<style scoped>
	.t-bl {
		width: 100%;
		height: 300rpx;
		overflow: hidden;
	}
	.blurbc {
		filter: blur(18rpx);
		
	}
	
	.t-1 {
		position: relative;
		height: 100rpx;
	}
	
	.t-1 > image{
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		top: -100rpx;
	}
	
	.t-1 > view {
		font-size: 38rpx;
		font-weight: 700;
		margin-left: 40rpx;
	}
	.topic-info {
		margin:0 20rpx;
	}
	
	.t-2 > view {
		color: #AAAAAA;
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	
	.t-3 {
		margin: 10rpx 0 ;
		color: #999999;
		font-size: 34rpx;
	}
</style>

